<template>
  <div>
    <a-modal
      title="菜单编辑"
      v-model="menuData.show"
      width="800px"
      style="overflow:hidden"
      @cancel="handleClose"
    >
      <div slot="title">
        <!-- <i class="el-icon-arrow-left"></i> -->
        <span>菜单编辑</span>
      </div>
      
          <el-form
            :model="parames"
            :rules="rules"
            label-position="left"
            ref="parames"
            label-width="94px"
            class="addForm"
            size="small"
          >
            <el-row :gutter="40" style="padding: 30px 30px">
              <el-col :span="12">
                <el-form-item label="名称:" prop="name">
                  <el-input size="small" v-model="parames.name" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="功能类型:">
                  <el-select style="width:100%" :disabled="menuData.type == 'newFirst'?true:false" size="small" v-model="parames.menuType">
                    <el-option v-for="(item,index) in menuType" :key="index" :label="item.desc" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="menuData.type !== 'newFirst' && menuData.type !== 'editFirst' && parames.menuType == 'MENU_ITEM' ">
                <el-form-item label="菜单路径:">
                  <el-input size="small" v-model="parames.url" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="menuData.type == 'newFirst' || menuData.type == 'editFirst'">
                <el-form-item  label="图标:">
                  <el-input size="small" v-model="parames.icon" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="menuData.type == 'newFirst' || menuData.type == 'editFirst'">
                <el-form-item label="图标预览:">
                  <i v-bind:class="parames.icon" class="icon element-icons"></i>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="序号:" prop="seq">
                  <el-input size="small" type="number" v-model="parames.seq" placeholder="请输入正整数"></el-input>
                </el-form-item>
              </el-col>   
            </el-row>
          </el-form>
          <template slot="footer">
            <el-button size="small" type="primary" v-if="menuData.type == 'newFirst' || menuData.type == 'newSecond'" @click="handleSend('1')">保存并继续新增</el-button>
            <el-button size="small" type="primary" @click="handleSend('2')">保存</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
          </template>
    </a-modal>
  </div>
</template>

<script>
/*
一级菜单需要添加菜单名称/图标/序号
二级菜单需要添加菜单名称/url/父级菜单/序号
*/
export default {
  props: ["menuData"],
  data() {
    return {
      parames: {
        id:'',
        parentId: '000000',
        name: "", //菜单名称
        url: "", //菜单路由
        menuType: '', //功能类型
        icon: "", //菜单图标（二级菜单需要）
        seq: 1 //序号
      },
      menuType: [],
      rules: {
        name: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        seq: [
          { required: true, message: "必填", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {

    handleClose() {
      //关闭弹窗
      this.menuData.show = false;
    },
    handleSend (type) { //提交信息
      this.$refs['parames'].validate((valid) => {
        if (valid) {
          if (this.menuData.type == 'newFirst') {
            this.parames.parentId = '000000'
            this.$post(this.$api.postProviderMenuAdd,this.parames).then(response => {
              if (response.data.succeed) {
                this.$emit('checkRender')
                if (type == '2') {
                  this.handleClose()
                }
              }
            })
          } else if (this.menuData.type == 'newSecond') { //添加子菜单或功能项
            this.parames.parentId = this.menuData.id
            this.$post(this.$api.postProviderMenuAdd,this.parames).then(response => {
              if (response.data.succeed) {
                this.$emit('checkRender')
                if (type == '2') {
                  this.handleClose()
                }
              }
            })
          } else if (this.menuData.type == 'editSecond' || this.menuData.type == 'editFirst') { //添加子菜单或功能项
            this.$post(this.$api.postProviderMenuEdit,this.parames).then(response => {
              if (response.data.succeed) {
                this.$emit('checkRender')
                if (type == '2') {
                  this.handleClose()
                }
              }
            })
          }
        }
      })
    },
    render () {
      if (this.menuData.type == 'newFirst') {
        this.parames.menuType = 'MENU_ITEM'
      } else if (this.menuData.type == 'editFirst') {
        this.parames.id = this.menuData.data.id
        this.parames.name = this.menuData.data.name //菜单名称
        this.parames.menuType = 'MENU_ITEM' //功能类型
        this.parames.icon = this.menuData.data.icon //菜单图标（一级菜单需要）
        this.parames.seq = this.menuData.data.seq //序号
      } else if (this.menuData.type == 'editSecond') {
        this.parames.id = this.menuData.data.id
        this.parames.name = this.menuData.data.name //菜单名称
        this.parames.url = this.menuData.data.url //菜单路由
        this.parames.menuType = this.menuData.data.menuType.name //功能类型
        this.parames.parentId = this.menuData.data.parentId //父级菜单id
        this.parames.seq = this.menuData.data.seq //序号
      }
    },
    restData () {
        this.parames.id = "" //菜单id
        this.parames.name = "" //菜单名称
        this.parames.url = "" //菜单路由
        this.parames.menuType = '' //功能类型
        this.parames.icon = "" //菜单图标（一级菜单需要）
        this.parames.parentId = "" //父级菜单id
        this.parames.seq = "" //序号
        this.$refs.parames.resetFields()
    }
  },
  computed: { //计算属性
    changeDialog () {
      return this.menuData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          console.log(this.parames.name,this.menuData.type)
          this.$utils.getEnumberation('postProviderMenuMenuType','menuType',this) //菜单类型
          this.render()
        } else {
          this.restData()
        }
      }
    },
    deep: true
  }
};
</script>

<style scoped>
</style>
